<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="/mks/css/index.css" />
		<link rel="stylesheet" href="/mks/swiper-bundle.min.css" />
		<script src="/mks/jquery-3.7.1.min.js"></script>
		<script src="/mks/swiper-bundle.min.js"></script>
	</head>
	<body>

		<!-- 轮播图部分 -->
		<div class="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="/mks/img/1.png" alt="" /></div>
				<div class="swiper-slide"><img src="/mks/img/1.png" alt="" /></div>
				<div class="swiper-slide"><img src="/mks/img/1.png" alt="" /></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>

		<!-- 顶部导航 -->
		<div class="marx-nav">
			<img src="/mks/img/2.png" alt="" class="marx-nav-img1" />
			<ul>
				{foreach name="nav" item="v"}
				<li><a href="{$v.url}" style="cursor: pointer; color: #FFFFFF; text-decoration: none ">{$v.title}</a></li>
				{/foreach}
			</ul>
			<div class="input">
				<img src="/mks/img/14.png" alt="" />
				<input type="text" placeholder="请输入关键词搜索" />
			</div>
		</div>


		<!-- 新闻公告 -->
		<div class="news">
			<div class="news_top">
				<p>XIN WEN GONG GAO</p>
				<p>新闻公告</p>
			</div>
			<!-- 中间 -->
			<div class="news_content1">
				{foreach name="news" item="v"}
				<div class="new-con">
					<div class="new-con-left">
						<img src="{$v.image}" alt="" class="news_content1_img" />
						<p></p>
					</div>
					<div class="new-con-right">
						<div class="new-title">
							<p>{$v.title}</p>
						</div>
						<div class="new-center">
							<div class="line"></div>
							<div class="time">{$v.createtime|date="Y-m-d", ###}</div>
						</div>
						<div class="new-text">
							<p>{$v.content}</p>
						</div>
						<div class="new-bottom">
							<img src="/mks/img/36.png" alt="" class="new-img-left">
							<img src="/mks/img/25.png" alt="" class="new-img-right">
							<div class="pages">
								<span class="page">1</span>/3
							</div>
						</div>
					</div>
				</div>
				{/foreach}
			</div>


		</div>

		<!-- 下面 -->
		<div class="news_content2">
			<p class="news_content2_p"></p>
			<div class="news_content2_div">
				{foreach name="news2" item="v"}
				<div>
					<p>
						<a href="{:url('Index/detail',['id' => $v['id']])}" style="cursor: pointer; color: #0d0d0d; text-decoration: none">{$v.title}</a>
					</p>
					<p>{$v.content}</p>
					<p>{$v.createtime|date="Y-m-d", ###}</p>
				</div>
				{/foreach}
			</div>
		</div>

		<!-- 查看更多 -->
		<div class="news_content2_ck">
			<span><a href="" class="aa">查看更多</a></span>
			<img src="/mks/img/25.png" alt="" />
		</div>

		<!-- 党建引领 -->
		<div class="leading">
			<div class="news_top">
				<p>DANG JIAN YIN LING</p>
				<p>党建引领</p>
			</div>
			<!-- 内容 -->
			<div class="leading_content">
				{foreach name="leading" item="v"}
				<div class="leading_content1">
					<img src="{$v.image}" alt="" />
					<div class="leading_content1_div">
						<div>
							<p>{$v.id}</p>
							<p>{$v.createtime|date="Y-m-d", ###}</p>
						</div>
						<div>
							{$v.content}
						</div>
					</div>
					<div class="show">

					</div>
					<div class="hidden">

					</div>
				</div>
				{/foreach}
			</div>
			<!-- 查看更多 -->
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="/mks/img/25.png" alt="" />
			</div>
		</div>

		<!-- 教研动态 -->
		<div class="teaching">
			<div class="news_top">
				<p>JIAO YAN DONG TAI</p>
				<p>新闻公告</p>
			</div>
			<!-- 内容 -->、
			<div class="teaching_content">
				<div class="teaching_content1">
					<img src="{$teaching.image}" alt="" />
					<div>
						{$teaching.content}
					</div>
				</div>
				<!--右侧新闻公告-->
				<div class="teaching_content2">
					<ul>
						{foreach name="teaching2" item="v"}
						<li>{$v.abstract}<span>{$v.createtime|date="Y-m-d", ###}</span></li>
						{/foreach}
					</ul>
				</div>

			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="/mks/img/25.png" alt="" />
			</div>
		</div>

		<!-- 社会服务 -->
		<div class="society">
			<div class="news_top">
				<p>SHE HUI FU WU</p>
				<p>社会服务</p>
			</div>
			<div class="society_content">
				<div class="society_content1">

					<img src="{$society.image}" alt="" />
					<div>
						<p>{$society.title}</p>
						<p>
							{$society.abstract}
						</p>
						<p>
							<img src="/mks/img/11.png" alt="" />
							<span>{$society.createtime|date="Y-m-d", ###}</span>
						</p>
					</div>
				</div>
				<div class="society_content2">
					<div>
						<img src="/mks/img/8.png" alt="" />
						红馆
					</div>
					<div>
						<img src="/mks/img/9.png" alt="" />
						心理健康中心
					</div>
				</div>
			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="/mks/img/25.png" alt="" />
			</div>
		</div>

		<!-- 主题活动 -->
		<div class="theme">
			<div class="news_top">
				<p>ZHU TI HUO DONG</p>
				<p>主题活动</p>
			</div>
			<div class="theme_content">
				{foreach name="theme" item="v"}
				<div class="theme-card1">
					<div class="theme-top">
						<p class="theme-title1">{$v.title1}</p>
						<p class="theme-title2">{$v.title2}</p>
					</div>
					<div class="theme-bottom">
						<p class="theme-text1">{$v.content1}</p>
						<p class="theme-text2">{$v.content2}</p>
					</div>
				</div>
				{/foreach}
			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="/mks/img/25.png" alt="" />
			</div>
		</div>

		<!-- 马院风采 -->
		<div class="mapin">
			<div class="news_top">
				<p>MA YUAN FENG CAI</p>
				<p>马院风采</p>
			</div>
			<div class="mapin_content">
				<div class="scroll-container">
					{foreach name="mapin" item="v"}
					<div class="scroll-content">
						<img src="{$v.image}" />
					</div>
					{/foreach}
				</div>
			</div>
		</div>

		<!-- 友情链接 -->
		<div class="frendly">
			<ul>
				<li>友情链接：</li>
				{foreach name="links" item="v"}
				<li><a href="" class="frendly_a">{$v.title}</a></li>
				{/foreach}
			</ul>
		</div>

		<!-- 最后 -->
		<div class="index_bottom">
			<div class="index_bottom_content">
				<img src="/mks/img/2.png" alt="" />
				<!-- <div></div> -->
				<p class="index_bottom_content_p1">地址：山东烟台市高新区海天路1001号</p>
				<p class="index_bottom_content_p2">办公室电话：0535-293876</p>
				<img src="/mks/img/26.png" alt="" class="index_bottom_content_img2" />
			</div>
			<div class="index_bottom_abs">
				Copyright O山东省城市服务技师学院版权所有
			</div>



		</div>

		<!-- 逻辑部分 -->
		<script>
			var mySwiper = new Swiper('.swiper', {
				autoplay: {
					delay: 3000, //1秒切换一次
				},
				loop: true, // 循环模式选项

				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				// navigation: {
				//   nextEl: '.swiper-button-next',
				//   prevEl: '.swiper-button-prev',
				// },

			})
		</script>

		<script>
			$('.new-con:first').show().siblings('.new-con').hide()
			var index = 0
			$('.new-img-right').click(() => {
				index++;
				if (index < 3) {
					$('.new-con').eq(index).show().siblings('.new-con').hide()
				} else {
					index = -1;
				}
			})
			$('.new-img-left').click(() => {
				index--;
				if (index >= 0) {
					$('.new-con').eq(index).show().siblings('.new-con').hide()
				} else {
					index = 3;
				}
			})
		</script>

	</body>
</html>